<template>
  <page-header-wrapper :title="false">
    <a-card title="索取发票">
      <!--      <template slot="extra">-->
      <!--        <a-button size="small" type="primary" icon="plus" @click="addModal">添加发票</a-button>-->
      <!--      </template>-->
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="客户名称">
                <!--                <a-auto-complete-->
                <!--                  v-model="queryParam['filter[customer_name]']"-->
                <!--                  :data-source="dataSource"-->
                <!--                  style="width: 200px"-->
                <!--                  placeholder="输入合同编号"-->
                <!--                />-->
                <a-input v-model="queryParam['filter[customer_name]']" placeholder="输入客户姓名" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="输入合同编号" />
              </a-form-item>
            </a-col>
            <!--            <a-col :md="6" :sm="24">-->
            <!--              <a-form-model-item label="业务编号">-->
            <!--                <a-input v-model="queryParam['filter[sb_name]']" placeholder="输入商标名称" />-->
            <!--              </a-form-model-item>-->
            <!--            </a-col>-->
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="联系电话">
                  <a-input v-model="queryParam['filter[phone1]']" placeholder="输入联系电话" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="创建时间">
                  <a-range-picker @change="onCreateAt" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="审核时间">
                  <a-range-picker @click="onCheckAt" />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.cp_id"
        :columns="invoiceColumns"
        :data="invoiceData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`搜索${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="tm_name" slot-scope="text,record">
          {{ text }}{{ record.pt_name }}
        </template>
        <template slot="invoice_status" slot-scope="text">
          {{ statusOpts[text] }}
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button size="small" type="primary" @click="getInvoiceInfo(record.cp_id)">索取发票</a-button>
        </template>
      </s-table>
      <a-modal
        destroy-on-close
        title="填写索取发票信息"
        v-model="visible"
        :width="700"
        @ok="onSubmit"
        @cancel="onCancel"
      >
        <a-form-model
          ref="ruleForm"
          :model="invoiceForm"
          :rules="invoiceForm.invoice_type == 2 ? invoiceRules2 : invoiceRules1"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="选择开票公司" prop="company_id">
            <a-select
              show-search
              placeholder="选择开票公司"
              v-model="invoiceForm.company_id"
              :filter-option="filterOption"
            >
              <a-select-option :disabled="item.stock == 0" v-for="item in companyOpts" :key="item.id" :value="item.id">{{ item.company_name }}({{ item.tax_point }}%)({{ item.stock }})</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-divider orientation="left">填写纳税人信息</a-divider>
          <a-form-model-item label="抬头类型" prop="header_type">
            <a-radio-group v-model="invoiceForm.header_type">
              <a-radio v-for="(item,index) in headerOpts" :key="index" :value="index">
                {{ item }}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="发票抬头" prop="header">
            <a-input v-model="invoiceForm.header" placeholder="输入发票抬头" />
          </a-form-model-item>
          <a-form-model-item label="发票类型" prop="invoice_type">
            <a-radio-group v-model="invoiceForm.invoice_type" name="radioGroup">
              <a-radio v-for="(item,index) in typeOpts" :key="index" :value="index">{{ item }}</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="统一社会信用代码" prop="social_code">
            <a-input v-model="invoiceForm.social_code" placeholder="输入统一社会信用代码" />
          </a-form-model-item>
          <a-form-model-item label="开户银行名称" prop="bank_name">
            <a-input v-model="invoiceForm.bank_name" placeholder="输入开户银行名称" />
          </a-form-model-item>
          <a-form-model-item label="基本开户账号" prop="account_num">
            <a-input v-model="invoiceForm.account_num" placeholder="输入基本开户账号" />
          </a-form-model-item>
          <a-form-model-item label="注册场所地址" prop="register_address">
            <a-input v-model="invoiceForm.register_address" placeholder="输入注册场所地址" />
          </a-form-model-item>
          <a-form-model-item label="注册固定电话" prop="register_phone">
            <a-input v-model="invoiceForm.register_phone" placeholder="输入注册固定电话" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/invoice'
import { getAddInvoice, getInvoiceList, postAddInvoice } from '@/api/invoice'

export default {
  components: {
    STable
  },
  name: 'InvoiceList',
  data () {
    return {
      invoiceColumns: col.contract,
      invoiceData: parameters => {
        return getInvoiceList(Object.assign(parameters, this.queryParam)).then(res => {
          this.statusOpts = res.result.invoiceStatusOpts
          return res.result
        })
      },
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      visible: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      invoiceRules1: {
        company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
        header_type: [{ required: true, message: '必须选择抬头类型', trigger: 'change' }],
        header: [{ required: true, message: '必须填写发票抬头', trigger: 'blur' }],
        invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }]
      },
      invoiceRules2: {
        company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
        header_type: [{ required: true, message: '必须选择抬头类型', trigger: 'change' }],
        header: [{ required: true, message: '必须填写发票抬头', trigger: 'blur' }],
        invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }],
        bank_name: [{ required: true, message: '必须填写开户行', trigger: 'blur' }],
        social_code: [{ required: true, message: '必须填写统一信用代码证', trigger: 'blur' }],
        account_num: [{ required: true, message: '必须填写银行账户', trigger: 'blur' }],
        register_address: [{ required: true, message: '必须填写地址', trigger: 'blur' }],
        register_phone: [{ required: true, message: '必须填写联系电话', trigger: 'blur' }]
      },
      invoiceForm: {},
      queryParam: {},
      advanced: true,
      tab: '1',
      statusOpts: {},
      companyOpts: {},
      headerOpts: {},
      typeOpts: {}
    }
  },
  methods: {
    getInvoiceInfo (id) {
      getAddInvoice(id).then(res => {
        if (res.status === 0) {
          this.invoiceForm.contract_id = id
          this.companyOpts = res.result.company_data
          this.headerOpts = res.result.header_type_opts
          this.typeOpts = res.result.invoice_type_opts
          this.visible = true
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters) {
      clearFilters()
    },
    toDetail (id) {
      this.$router.push({ name: 'InvoiceDetail', params: { id } })
    },
    addModal () {
      this.visible = true
    },
    delInvoice () {
      this.$confirm({
        title: '是否删除发票'
      })
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearch () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.ruleForm.validate(valid => {
        if (valid) {
          for (const k in app.invoiceForm) {
            data['invoice[' + k + ']'] = app.invoiceForm[k]
          }
          data.contract_id = app.invoiceForm.contract_id
          app.$confirm({
            title: '一经提交无法撤回，请核实好信息',
            onOk: () => {
              postAddInvoice(data).then(res => {
                if (res.status === 0) {
                  app.onCancel()
                  app.$refs.table.refresh()
                } else {
                  app.$warning({
                    title: res.msg
                  })
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.invoiceForm = {}
      this.visible = false
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onCreateAt (date, dateString) {
      this.queryParam['filter[created_at_start]'] = dateString[0]
      this.queryParam['filter[created_at_end]'] = dateString[1]
    },
    onCheckAt (date, dateString) {
      this.queryParam['filter[check_time_start]'] = dateString[0]
      this.queryParam['filter[check_time_end]'] = dateString[1]
    }
  }
}
</script>

<style scoped>

</style>
